<template>
  <div class="addressFeek">
    <div class="feed-card">
      <div class="name">
        <div class="title">设备名称</div>
        <div class="contant">{{info.title}}</div>
      </div>
      <div class="name">
        <div class="title">插座号</div>
        <div class="contant">{{info.s_code}}号插座</div>
      </div>
    </div>
    <div class="input-contant">
      <div class="text">
        故障原因
        <span>多选</span>
      </div>
      <div class="check-menu">
        <div
          class="check-contant"
          v-for="(item,index) in selectArr"
          :key="index"
          @click="check(index)"
        >
          <div class="check-box" v-if="!item.check"></div>
          <img :src="gou" v-if="item.check">
          <div :class="item.check? 'check-text' : 'noCheck-text'">{{item.text}}</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="text">反馈地址信息</div>
      <textarea class="edit" v-model="content"  @blur="inputBack()" placeholder="请根据地点进行简要描述，如周边特征，建筑，所在街道等"></textarea>
      <div class="input-img-contant" @click="camera()">
        <span v-if="avatar.length<=0">+</span>
        <img :src="avatar" v-if="avatar.length>0">
      </div>
    </div>
    <div class="button-contant" @click="commit">
      <div class="button">确认提交</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "index.less";
</style>

<script>
import { mapActions, mapGetters } from "vuex";
import wx from "weixin-js-sdk";
export default {
  name: "addressFeek",
  data() {
    return {
      gou: require("../../assets/public/gou.png"),
      selectArr: [
        {
          text: "插座不供电",
          check: true,
          class: 1
        },
        {
          text: "充电接口损坏",
          check: false,
          class: 2
        },
        {
          text: "二维码损坏",
          check: false,
          class: 3
        },
        {
          text: "电量接不通",
          check: false,
          class: 4
        },
        {
          text: "插座电压不符",
          check: false,
          class: 5
        },
        {
          text: "其他",
          check: false,
          class: 6
        }
      ],
      info: {},
      content: "",
      avatar: "" //  上传的图片
    };
  },
  created() {
    this.change(false);
    this.getInfo();
  },
  methods: {
    ...mapActions("Home", ["change"]),
    check(index) {
      this.selectArr[index].check = !this.selectArr[index].check;
    },
    createdArr() {
      let newArr = [];
      for (let i in this.selectArr) {
        if (this.selectArr[i].check) {
          newArr.push(this.selectArr[i].class);
        }
      }
      return newArr;
    },
    commit() {
      this.$dialog.loading.open("正在提交");
      let arr = this.createdArr();
      arr = arr.toString();
      this.$http
        .post("/repair/Create", {
          deviceid: this.info.id,
          class: arr,
          s_code: this.getID,
          title: this.info.title,
          pics: this.avatar,
          address: this.info.address,
          content: this.content
        })
        .then(res => {
          console.log(res.data.data);
          if (res.data.errno == 0) {
            this.$dialog.toast({
              mes: "提交成功",
              timeout: 1500,
              icon: "success"
            });
            this.avatar = "";
          } else {
            this.$dialog.toast({
              mes: "提交失败",
              timeout: 1500,
              icon: "error"
            });
          }
          this.$dialog.loading.close();
        });
    },
    camera() {
      const that = this;
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          var localIds = res.localIds[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          that.avatar = localIds.toString();
          that.upload(localIds); // 更新
        }
      });
    },
    // 上传图片
    upload(localIds) {
      const that = this;
      wx.uploadImage({
        localId: that.avatar, // 需要上传的图片的本地ID，由chooseImage接口获得
        isShowProgressTips: 1, // 默认为1，显示进度提示
        success: function(res) {
          var serverId = res.serverId; // 返回图片的服务器端ID
          // that.down(serverId); // 下载
          that.$http
            .post("/upload", {
              serverId: serverId
            })
            .then(res => {
              if (res.data.errno == 0) {
                that.$dialog.toast({
                  mes: "上传成功",
                  timeout: 1500,
                  icon: "success"
                });
                that.avatar = res.data.data.imgUrl;
              } else {
                that.$dialog.toast({
                  mes: "上传失败",
                  timeout: 1500,
                  icon: "error"
                });
              }
              that.$dialog.loading.close();
            });
        }
      });
    },
    getInfo() {
      this.$dialog.loading.open("正在加载");
      const that = this;
      this.$http
        .get("/socket/Info", {
          params: {
            id: this.$route.query.id
          }
        })
        .then(res => {
          this.info = res.data.data;
          this.$dialog.loading.close();
        });
    }
  },
  computed: {
    ...mapGetters("PayType", ["getMachine", "getID"])
  },
  components: {}
};
</script>
